<template>
  <div>
    <table-ext :columns="columns"  :config="config" ref="milestoneTb">
      <span slot="table-action">
        <el-button @click="addNode">新增</el-button>
        <el-button @click="removeNodes">移除</el-button>
      </span>
    </table-ext>
    
    <el-dialog :visible.sync="sync"  title="里程碑" @close="close">
      <el-form v-model="mile">
        <el-form-item label="里程碑节点">
          <el-input v-model="mile.milestoneName" />
        </el-form-item>
        <el-form-item label="预计开始时间">
          <el-date-picker
            v-model="mile.prestartdate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>          
        </el-form-item>
        <el-form-item label="是否需要验收材料">
          <el-switch
            style="display: block"
            v-model="mile.accData"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0">
          </el-switch>
        </el-form-item>
        <!-- <el-form-item label="节点权重">
          <el-input v-model="milestoneName" />
        </el-form-item> -->
        <el-form-item label="是否需要付款节点">
          <el-switch
            style="display: block"
            v-model="mile.payNode"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
     </span>
    </el-dialog>

  </div>
</template>
<script>
  import TableExt from '@/components/common/table-ext/table-ext.vue';
  import TableIcon from '@/components/common/table-ext/table-icon';
   export default {
    props: ['id'],
    // 引入自定义表格组件
    components:{
      'table-ext': TableExt
    },
    data() {
      return {
        mile:{
          milestoneName:'',
          prestartdate: '',
          payNode: ''
        },
        config:{ // 页面共通配置
          title: '合同里程碑', //页面标题
          isPage: false, //是否分页
          isNo: true, //是否显示序号
          selection: true,
          crudMapping:{ // CRUD方法
            query:{
              url: this.lib.config.host.contract + '/contractmgt/contract/mileStone/list/'+this.id
            }
          }
        },
        // 表格列定义
        columns:[{
          label: 'id',
          key: 'id',
          hidden: true
        },{
          label: '里程碑节点',
          key: 'milestoneName',
          align: 'center'
        },{
          label: '付款条件',
          key: 'payTermsItem'
        },{
          label: '预订付款金额(元)',
          key: 'prePay',
          align: 'center'
        },{
          label: '是否需要验收材料',
          key: 'accData',
          align: 'center',
          render:(createElement, params)=>{ //动态渲染, 字典表示例
            return createElement(TableIcon,{props:{
                flag: params.row.excessFlag,
                titles: [{status:0,title:'否'},{status:1,title:'是'}]
            }});
          }
        },{
          label: '预计开始时间',
          key: 'prestartdate'
        },{
          label: '验收材料附件',
          key: 'accDataFileName'
        },{
          label: '付款凭证',
          key: 'payVoucherName'
        },{
          label: '实际付款金额(元)',
          key: 'realPay'
        },{
          label: '金额差异说明',
          key: 'payDiffDes'
        },{
          label: '是否审核',
          key: 'checkStatus',
          render:(h, ctx)=>{ //动态渲染, 字典表示例
            return h(TableIcon,{props:{
                flag: ctx.row.excessFlag,
                titles: [{status:0,title:'否'},{status:1,title:'是'}]
            }});}
        },{
          label: '是否上传验收材料',
          key: 'accDataAttStatus',
          render:(h, ctx)=>{ //动态渲染, 字典表示例
            return h(TableIcon,{props:{
                flag: ctx.row.excessFlag,
                titles: [{status:0,title:'否'},{status:1,title:'是'}]
            }});}
        },{
          label: '是否上传付款凭证',
          key: 'payVoucherAttStatus',
          render:(h, ctx)=>{ //动态渲染, 字典表示例
            return h(TableIcon,{props:{
                flag: ctx.row.excessFlag,
                titles: [{status:0,title:'否'},{status:1,title:'是'}]
            }});}
        }
       ]
      }
    },
    methods: {
        cancel(){

        },
        save(){
        
        }
    }
  }
</script>
<style>


</style>
